<template>
	<div id="myEcharts" v-bind:style="{ height: '250px' }"></div>
</template>

<script setup>//@ts-nocheck

import { onMounted, onUnmounted, inject } from "vue"
import api from '../../api/api'

// 声明定义一下echart
let echart = inject("echarts")
onMounted(() => {
	initChart()
})
onUnmounted(() => {
	echart.dispose
})
// 基础配置一下Echarts
function initChart() {
	let chart = echart.init(document.getElementById("myEcharts"))
	// 显示加载
	chart.showLoading()
	// 封装获取对应评论的方法
	async function toGetCommentData(type) {
		return await api.get(`/admin/movie/comment/${type}`).then((res) => {
			return res.data.total
		})
	}
	Promise.all([toGetCommentData(true), toGetCommentData(false)]).then((res) => {
		let total = res[0] + res[1]
		let rate = (1 - res[1] / total).toFixed(2) * 100
		// 关闭加载
		chart.hideLoading()
		let options = {
			title: [
				{
					text: '评论审核率',
					x: 'center',
					top: '32%',
					textStyle: {
						color: '#fff',
						fontSize: 20,
						fontWeight: '100',
					},
				},
				{
					text: `${rate}%`,
					x: 'center',
					top: '50%',
					textStyle: {
						fontSize: 50,
						color: '#2ecc71',
						foontWeight: '500',
					},
				},
			],
			polar: {
				radius: ['44%', '50%'],
				center: ['50%', '50%'],
			},
			angleAxis: {
				max: 100,
				show: false,
			},
			radiusAxis: {
				type: 'category',
				show: true,
				axisLabel: {
					show: false,
				},
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
			},
			series: [
				{
					type: 'pie',
					startAngle: 0,
					radius: ['83%', '90%'],
					center: ['50%', '50%'],
					data: [
						{
							hoverOffset: 1,
							value: res[0],
							itemStyle: {
								normal: {
									color: '#2ecc71',
								},
							},
							label: {
								show: false,
							},
							labelLine: {
								normal: {
									smooth: true,
									lineStyle: {
										width: 0,
									},
								},
							},
							hoverAnimation: false,
						},
						{
							label: {
								show: false,
							},
							labelLine: {
								normal: {
									smooth: true,
									lineStyle: {
										width: 0,
									},
								},
							},
							value: total - res[0],
							hoverAnimation: false,
							itemStyle: {
								color: '#e74c3c',
							},
						},
					],
				},
				{
					type: 'pie',
					startAngle: 90,
					radius: '80%',
					hoverAnimation: false,
					center: ['50%', '50%'],
					itemStyle: {
						normal: {
							labelLine: {
								show: false,
							},
							color: '#2c3e50',
							// shadowBlur: 10,
							// shadowColor: 'rgba(55,70,130, 1)'
						},
					},
					data: [
						{
							value: total,
						},
					],
				},
			],
		}
		// 配置和数据
		chart.setOption(options)
		window.onresize = function () {
			//自适应大小
			chart.resize()
		}
	})
}
</script>

<style lang="scss" scoped>

</style>